<template>
  <div class="container">
    <!--<div class="btnContainer" :style="style">-->
      <div class="btnContainer">
      <span class="btnText" v-text="btnText"></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  const HEIGHT = '11VW';
  const WIDTH = '32VW';

  export default {
    name: 'btn-primary',

    data() {
      return {
        style: {
          width: this.btnWidth,
          height: HEIGHT
        }
      };
    },

    props: {
      btnText: {
        type: String,
        default: 'btn need text !',
        required: true
      },
      btnWidth: {
        type: String,
        default: WIDTH
      }
    }

  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .container
    display flex
    align-items center
    justify-content center
    background white
    width vw(375)
    height vw(50)
  .btnContainer
    display flex
    align-items center
    justify-content center
    /*background-color main-color*/
    background main-color
    border-radius vw(100)
    width vw(120)
    height vw(40)

  .btnText
    font-size word16
    color white

</style>
